<template>
	<view class="page">
		<view class="numCar">
			<view class="title">
				贡献值
			</view>
			<view class="num">
				{{points}}
			</view>
		</view>
		<view class="selAll">
			<view class="sel">
				<text>类型</text>
				<text class="icon"></text>
			</view>
			<view class="sel">
				<text>日期选择</text>
				<text class="icon"></text>
			</view>
		</view>
		
		<view class="numList">
			<view class="box">
				<view class="head" v-for="(item, index) in tableData" :key="index">
					<view class="yuan"></view>
					<view class="state">{{item.description}}</view>
					<view class="FX1"></view>
					<view class="num" v-if="item.value>0">+{{item.value}}</view>
					<view class="num" v-else>{{item.value}}</view>
				</view>
				<view class="date">
					{{item.createTime}}
				</view>
			</view>
			<!-- 没有记录 -->
			<view class="d-c-c p30" v-if="tableData.length==0 && !loading">
				<text class="iconfont icon-wushuju"></text>
				<text class="cont">亲，暂无相关记录哦</text>
			</view>
			<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
		</view>
	</view>

</template>

<script>
	import uniLoadMore from "@/components/uni-load-more.vue";
	// import recharge from "./part/recharge.vue";
	export default {
		components: {
			uniLoadMore
			// recharge
		},
		data() {
			return {
				isPop: false,
				/*是否加载完成*/
				loadding: true,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				/*顶部刷新*/
				topRefresh: false,
				/*手机高度*/
				phoneHeight: 0,
				/*可滚动视图区域高度*/
				scrollviewHigh: 0,
				/*数据列表*/
				tableData: [],
				/*最后一页码数*/
				last_page: 0,
				/*当前页面*/
				page: 1,
				/*每页条数*/
				list_rows: 20,
				no_more: false,
				loading: true,
				points: 0,
				is_open: false,
				discount_ratio:'0',
				isTransBalance:false
			};
		},
		computed: {

			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.tableData.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			}
		},
		mounted() {
			/*获取数据*/
			this.getData();
		},
		onReachBottom() {
			let self = this;
			if (self.page < self.last_page) {
				self.page++;
				self.getData();
			}
			self.no_more = true;

		},
		methods: {
			closePop(e) {
				if(e!=null){
					this.page = 1;
					this.tableData = [];
					this.getData();
				}
				this.isPop = false;
			},
			/*获取数据*/
			getData() {
				let self = this;
				let page = self.page;
				let list_rows = self.list_rows;
				self._postBody('points/log/index', {
					pageIndex: page || 1,
					pageSize: list_rows,
				}, function(res) {
					self.loading = false;
					self.points = res.data.points;
					self.discount_ratio = res.data.discountRatio;
					self.is_open = res.data.isOpen;
					self.isTransBalance = res.data.isTransBalance;
					self.tableData = self.tableData.concat(res.data.list.records);
					self.last_page = res.data.list.lastPage;
					if (res.data.list.lastPage <= 1) {
						self.no_more = true;
						return false;
					}

				});
			},
			/*跳转积分商城*/
			gotoShop() {
				this.gotoPage('/pages/plus/points/list/list');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 0 20rpx;
	}

	.numCar {
		width: 710rpx;
		height: 280rpx;
		background-image: url('../../static/slbg.png');
		background-size: 100% 100%;

		.title {
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			padding-top: 102rpx;
			padding-left: 52rpx;
		}

		.num {
			font-weight: bold;
			font-size: 72rpx;
			color: #FFFFFF;
			padding-left: 52rpx;
		}
	}
	.selAll{
		display: flex;
		justify-content: end;
		.sel {
			min-width: 180rpx;
			text-align: center;
			height: 45rpx;
			line-height: 45rpx;
			background: #F2F2F2;
			border-radius: 22rpx;
			font-size: 24rpx;
			color: #999999;
			margin-top: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// padding: 0 30rpx;
			margin-left: 30rpx;
			.icon {
				width: 0;
				height: 0;
				border-left: 12rpx solid transparent;
				border-right: 12rpx solid transparent;
				border-top: 18rpx solid #999999;
				margin-left: 20rpx;
			}
		}
		
	}
	
	.numList{
		margin-top: 37rpx;
		.box{
			border-top: 1rpx solid #CCCCCC;
			padding: 40rpx 24rpx 45rpx 14rpx;
			.head{
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				.yuan{
					width: 10rpx;
					height: 10rpx;
					background: #0F4BCB;
					border-radius: 50%;
				}
				.state{
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
					line-height: 50rpx;
					margin-left: 20rpx;
				}
			}
			.date{
				font-weight: 300;
				font-size: 24rpx;
				color: #999999;
				margin-left: 30rpx;
			}
			
		}
	}
</style>